import React, { useState } from 'react'
import { Modal, Button ,Input ,Form} from 'antd';
import http from '../../../../services/http'
import './add.css'

const { TextArea } = Input;

const onFinish = (values) => {
    console.log(values);
    http({
        url:'/addindex',
        data:{
            index_id:values.index_id,
            index_name:values.index_name,
            index_unit:values.index_unit,
            index_up:values.index_up,
            index_down:values.index_down,
            index_standard:values.index_standard,
            org_name:values.org_name
        }
      }).then( (res) => {
        window.location.reload()
    })
};

const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
};

export default function Add() {
    const [visible, setVisible] = useState(false);
    return (
        <div>
            <Button type="primary" onClick={() => setVisible(true)}>
                添加
            </Button>
            <Modal
                className='data'
                title="添加"
                centered
                footer={
                    [] // 设置footer为空，去掉 取消 确定默认按钮
                }
                visible={visible}
                onOk={() => setVisible(false)}
                onCancel={() => setVisible(false)}>
                <Form  
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 15 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    >
                         <Form.Item
                            label="套餐ID"
                            name="index_id"
                            shouldUpdate
                            rules={[{
                                required: true, 
                                message: '请输入套餐ID' ,
                                pattern: new RegExp(/^[1-9]\d*$/, "g")
                            }]}
                            >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="机构指标名称"
                            name="index_name"
                            rules={[{
                                required: true, 
                                message: '请输指标名称',
                            }]}
                            >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="指标单位"
                            name="index_unit"
                            rules={[{
                                required: true, 
                                message: '请输指标单位' ,
                            }]}
                            >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="参考上限"
                            name="index_up"
                            rules={[{
                                required: true, 
                                message: '请输入数字' ,
                                pattern: new RegExp(/^[1-9]\d*$/, "g")
                            }]}
                            >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="参考下限"
                            name="index_down"
                            rules={[{
                                required: true, 
                                message: '请输入数字' ,
                                pattern: new RegExp(/^[1-9]\d*$/, "g")
                            }]}
                            >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="对应指标标准"
                            name="index_standard"
                            rules={[{
                                required: true, 
                            }]}
                            >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="机构名称"
                            name="org_name"
                            rules={[{
                                required: true, 
                            }]}
                            >
                            <Input/>
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 11, span: 16 }}>
                            <Button onClick={() => setVisible(false)}>
                            取消
                            </Button>

                            <Button type="primary" htmlType="submit" style={{margin:'10px'}} onClick={() => setVisible(false)}>
                            提交
                            </Button>
                        </Form.Item>
                    </Form>
            </Modal>
        </div>
    )
}